<template>
<div>
     <el-page-header @back="goBack" content="详情页面">
</el-page-header>
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" class="box">
  <el-form-item label="标题:">
    <p style="width: 750px;" >{{formLabelAlign.title}}</p>
  </el-form-item>
  <el-form-item label="时间:">
    <p style="width: 750px;" >{{formLabelAlign.add_time}}</p>
  </el-form-item>
  <el-form-item label="关键字:">
    <p style="width: 750px;" >{{formLabelAlign.keywords}}</p>
  </el-form-item>
    <el-form-item label="作者:">
    <p style="width: 750px;" >{{formLabelAlign.author}}</p>
  </el-form-item>
   <el-form-item label="图片:">
     <viewer>
  <img
    :src="formLabelAlign.thumb"
    style="width: 50px;height: 50px; cursor:pointer"
     @error="imgError"
    >
</viewer>
  </el-form-item>
    <el-form-item label="正文:">
    <!-- <p style="width: 250px;" >{{formLabelAlign.content}}</p> -->
       <div>
            <el-card style="height: 610px; width: 700px">
              <quill-editor
              v-model="formLabelAlign.content"
                ref="myQuillEditor"
                style="height: 500px"
                :options="editorOption"
              >
                <!-- 自定义toolar -->
                <div id="toolbar" slot="toolbar">
                  <!-- Add a bold button -->
                  <button class="ql-bold" title="加粗">Bold</button>
                  <button class="ql-italic" title="斜体">Italic</button>
                  <button class="ql-underline" title="下划线">underline</button>
                  <button class="ql-strike" title="删除线">strike</button>
                  <button class="ql-blockquote" title="引用"></button>
                  <button class="ql-code-block" title="代码"></button>
                  <button class="ql-header" value="1" title="标题1"></button>
                  <button class="ql-header" value="2" title="标题2"></button>
                  <!--Add list -->
                  <button
                    class="ql-list"
                    value="ordered"
                    title="有序列表"
                  ></button>
                  <button
                    class="ql-list"
                    value="bullet"
                    title="无序列表"
                  ></button>
                  <!-- Add font size dropdown -->
                  <select class="ql-header" title="段落格式">
                    <option selected>段落</option>
                    <option value="1">标题1</option>
                    <option value="2">标题2</option>
                    <option value="3">标题3</option>
                    <option value="4">标题4</option>
                    <option value="5">标题5</option>
                    <option value="6">标题6</option>
                  </select>
                  <select class="ql-size" title="字体大小">
                    <option value="10px">10px</option>
                    <option value="12px">12px</option>
                    <option value="14px">14px</option>
                    <option value="16px" selected>16px</option>
                    <option value="18px">18px</option>
                    <option value="20px">20px</option>
                  </select>
                  <select class="ql-font" title="字体">
                    <option value="SimSun">宋体</option>
                    <option value="SimHei">黑体</option>
                    <option value="Microsoft-YaHei">微软雅黑</option>
                    <option value="KaiTi">楷体</option>
                    <option value="FangSong">仿宋</option>
                    <option value="Arial">Arial</option>
                  </select>
                  <!-- Add subscript and superscript buttons -->
                  <select
                    class="ql-color"
                    value="color"
                    title="字体颜色"
                  ></select>
                  <select
                    class="ql-background"
                    value="background"
                    title="背景颜色"
                  ></select>
                  <select class="ql-align" value="align" title="对齐"></select>
                  <button class="ql-clean" title="还原"></button>
                  <!-- You can also add your own -->
                </div>
              </quill-editor>
            </el-card>
          </div>
  </el-form-item>

</el-form>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import http from "../utils/http";
import { Quill, quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//引入font.css
import "../views/font.css";
// 自定义字体大小
let Size = Quill.import("attributors/style/size");
Size.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px"];
Quill.register(Size, true);
// 自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);

export default {
 //import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
    thumb: "",
      headers: { token: sessionStorage.getItem("token") },
   labelPosition: 'right',
        formLabelAlign: {
        title: "",
        content: "",
        keywords: "",
        thumb: "",
        author: "",
        desc: "",
        add_time:"",
        },
    news_id:this.$route.params.id,
    editorOption: {},
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
   imgError () {
      let img = event.srcElement;
      img.src = require('@/images/news.jpg');
      img.onerror = null; //防止闪图
    },
    // 图片
    chec(response) {
      // console.log(response);
      this.formLabelAlign.thumb = response.data.src;
      this.thumb = response.data.src;
      this.form.thumb = response.data.src;
    },
    beforeAvatarUploads(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
      //  富文本编辑器
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },
goBack() {
       this.$router.back();
      },
      async xiangq() {
      let res = await http.get("/api/visit/news/show?id=" +this.news_id);
      console.log(res);
      if (res.code == "00000") {
        this.formLabelAlign = res.data;
      }
    },
    
},
//生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.xiangq()
    // console.log('created', this.$route)
  },
//生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.news_id=this.$route.params.id
    // console.log(this.news_id);
    // console.log('mounted', this.$route.params.id)
  },
    //富文本编辑器
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* justify-content: center; */
  height:100%;
}
</style>